<template>
  <div class="Opheader j-c">
    <div class="selectedCount">
      <el-button icon="el-icon-close" @click="selectCancle" round></el-button>
      已经选择了{{ selectedCount }}项
    </div>
    <div class="opeatorButton">
      <el-button
        v-if="!isRecycle && selectedCount == 1"
        type="success"
        icon="el-icon-scissors"
        @click="goTocut"
        round
        >裁剪</el-button
      >
      <el-button
        v-if="!isRecycle"
        type="primary"
        icon="el-icon-download"
        round
        @click="selectDownload"
        >下载</el-button
      >

      <el-button
        v-if="!isRecycle"
        type="danger"
        icon="el-icon-delete-solid"
        @click="remove"
        round
        >删除</el-button
      >
      <el-button
        v-if="isRecycle"
        type="success"
        icon="el-icon-refresh-left"
        @click="selectRestore"
        round
        >恢复</el-button
      >
      <el-button
        v-if="isRecycle"
        type="danger"
        icon="el-icon-delete-solid"
        @click="removeCompletely"
        round
        >删除</el-button
      >
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters("photo", ["selectedCount"]),
    isRecycle: function () {
      return this.$route.path == "/home/recycle";
    },
  },

  inject: ["reload"],
  methods: {
    remove() {
      let self = this;
      this.$confirm("此操作将图片移入回收站, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.selectDelete();
          this.$message({
            duration: 500,
            type: "success",
            showClose: true,
            message: "删除成功!",
          });
          self.reload();
        })
        .catch(() => {
          this.$message({
            duration: 500,
            type: "info",
            showClose: true,
            message: "已取消删除",
          });
        });
    },
    removeCompletely() {
      let self = this;
      this.$confirm("此操作将图片彻底删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.selectDeleteCompetely();
          this.$message({
            duration: 500,
            type: "success",
            showClose: true,
            message: "删除成功!",
          });
          self.reload();
        })
        .catch(() => {
          this.$message({
            duration: 500,
            type: "info",
            showClose: true,
            message: "已取消删除",
          });
        });
    },
    goTocut() {
      let checkedImgs = this.$store.state.photo.checkedImgs;
      if (checkedImgs.length == 1) {
        this.$router.push({
          path: "/home/piccut",
          query: { id: checkedImgs[0] },
        });
      }
    },
    selectCancle: function () {
      console.log("取消选择");
      this.$store.commit("photo/clearChecked");
      this.reload();
    },
    selectDelete: async function () {
      console.log("删除");
      let checkedImgs = this.$store.state.photo.checkedImgs;
      //let self = this;
      let param = new FormData();
      param.append("imageIds", checkedImgs);
      await this.$deleteImg("/imgcenter/deleteImageById", param);
      //console.log(data);
      this.$store.commit("photo/clearChecked");
      this.reload();
    },
    selectDownload: async function () {
      console.log("下载");
      let checkedImgs = this.$store.state.photo.checkedImgs;
      //console.log(checkedImgs);
      await this.$downloadImg("/imgcenter/downloadByIds", checkedImgs);
      this.$store.commit("photo/clearChecked");
    },
    selectDeleteCompetely: async function () {
      console.log("彻底删除");
      let checkedImgs = this.$store.state.photo.checkedImgs;
      //console.log(checkedImgs);
      let param = new FormData();
      param.append("imageIds", checkedImgs);
      await this.$deleteImg(
        "/imgcenter/recycle/deleteImageByIdCompletely",
        param
      );
      setTimeout(this.$store.commit("photo/clearChecked"), 500);

      this.reload();
    },
    selectRestore: async function () {
      console.log("恢复");
      let checkedImgs = this.$store.state.photo.checkedImgs;
      //console.log(checkedImgs);
      let formdata = new FormData();
      formdata.append("imageId", checkedImgs);
      await this.$post("/imgcenter/recycle/restore", formdata);
      this.$store.commit("photo/clearChecked");
      this.reload();
    },
  },
};
</script>

<style>
.Opheader {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #506454;
  border-bottom: 2px solid rgb(10, 181, 223);
}
.selectedCount {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>